<template>
    <div class="mainWarp">
        <van-nav-bar title="商品分类" />
        <van-tree-select v-model:main-active-index="activeIndex" height="90vh" :items="typelist"
            @click-nav="changeType">
            <template #content>
                <div v-if="activeIndex === id">
                    <div class="aui-flex-links" v-if="prolist.length > 0">
                        <router-link v-for="item in prolist" :key="item.id"
                            :to="{ path: '/product/product/info', query: { proid: item.id } }" class="aui-flex-links-item">
                            <div class="aui-flex-links-img"> <img :src="item.cover_cdn" alt=""> </div>
                            <div class="aui-flex-links-text">{{ item.name }}</div>
                        </router-link>
                    </div>
                    <div class="aui-flex-links" v-else>
                        <div style="color: #c8c9cc;text-align: center;">暂无商品数据</div>
                    </div>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>
<script>
export default {
    name: "ProductType",
    emits: ['toggle'],
    created() {
        this.$emit('toggle', true)

        //根据分类id查询商品数据
        this.TypeData()
    },
    data() {
        return {
            activeIndex: 0,
            typelist: [],
            prolist: [],
            typeid: 1,
            id: 0
        }
    },
    methods: {
        async TypeData() {
            // console.log(this.typeid)
            var data = {
                typeid: this.typeid,
                flag: 0,
                orderby: "id",
                keywords: ""
            }

            var result = await this.$api.productType(data)
            if (result.code == 1) {
                this.prolist = []
                this.typelist = []
                this.prolist = result.data.prolist
                result.data.typelist.forEach(item => {
                    this.typelist.push({
                        text: item.name,
                        id: item.id,
                        cover_cdn: item.cover_cdn
                    })
                })
            }
        },
        changeType(index) {
            this.typeid = this.typelist[index].id
            this.id = index
            this.TypeData()
        }
    }
}
</script>
<style scoped>
.aui-flex-links {
    padding: 10px 8px;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    margin-top: 15px;
    padding-bottom: 20px
}

.aui-flex-links-item {
    position: relative;
    float: left;
    padding: 5px 0;
    width: 44%;
    box-sizing: border-box;
    margin: 0 3%;
}

.aui-flex-links-img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.aui-flex-links-text {
    color: #444;
    font-size: 12px;
    text-align: center;
    padding-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>